<template>
  <div class="popup-select" ref="reference" v-clickoutside="handleClose">
    <el-row>
      <el-col class="popup-select-line" @click.native="handleShow">
        <el-col :span="1">
          <slot name="left"></slot>
        </el-col>
        <el-col :span="20" :offset="1">
          {{title}}
        </el-col>
        <el-col :span="1" >
          <template v-if="$slots.right">
            <slot name="right"></slot>
          </template>
          <div class="add-icon" v-else>
            <i class="el-icon-plus"></i>
          </div>
        </el-col>
        <el-col :span="1"></el-col>
      </el-col>
      <el-col class="bb">
        <el-tag class="mb-10 mr-5" 
        v-for="(item,index) in chooseList" 
        :key="index"
        :closable="true"
        @close="tagHandleClose(index,item)"
          type="primary">{{item[labelKey]}}</el-tag>
      </el-col>
    </el-row>
    <div class="popup-box el-popper" v-show="popupShow" ref="popper">
      <ul>
        <li class="popup-box-line" 
        :class="{'cur':item.active,'disabled':item.disabled}"
        @click="choose(listData,item)"
        v-for="(item,index) in listData" :key="index">
          <el-row>
            <el-col :span="1" v-if="item.type">
              <span class="yuan"
                :class="{'duty':item.type==0,'hot':item.type==1,'cold':item.type==2,'day':item.type==4}"
              ></span>
            </el-col>
            <el-col :span="item.type?16:17">
             {{item[labelKey]}}
            </el-col>
            <el-col :span="5">
              <i class="el-icon-document mr-10"></i><span class="has">3</span>
            </el-col>
            <el-col :span="2" class="tr" v-show="!item.disabled">
              <i class="el-icon-check" title="选择"></i>
            </el-col>
          </el-row>
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
import Vue from 'vue';
const isServer = Vue.prototype.$isServer;
import Clickoutside from "../tools/clickoutside"
const Popper = isServer ? function() {} : require('popper.js');  
export default {
  name: 'popupSelect',
  directives: { Clickoutside },
  data(){
    return {
      popupShow:false,
      chooseList:[],
    }
  },
  props:{
    listData:[Array],
    placement: {
        type: String,
        default: 'bottom-start'
    },
    labelKey: [String, Number],
    valueKey: [String, Number],
    multiple:{
      type: Boolean,
      default: true
    },
    disabled:{
      type:Boolean,
      default:false
    },
    title:{
      type: String,
      default: ''
    }
  },
  mounted() {
    // console.log(this.$slots.right)
  },
  watch:{
    popupShow(val){
      if(val){
        this.update()
      }else{
        this.destroy();
      }
    }
  },
  methods: {
    toggleActive(item){
      this.listData.map((li,index)=>{
        if(li[this.valueKey]==item[this.valueKey]){
          this.$set(li,'active',false)
        }
      })
    },
    tagHandleClose(index,item){
      this.chooseList.splice(index,1);
      this.toggleActive(item);
      this.$emit("choose",this.chooseList)
    },
    choose(list,item){
      if(item.disabled){
        return
      }
      let chooseList=[];
      if(this.multiple){
        this.$set(item,'active',!item.active)
      }
      list.map(li=>{
        if(!this.multiple){
          this.$set(li,'active',false)
        }
        // console.log(li.disabled)
        if(li.active&&!li.disabled){
          chooseList.push(li)
        }
      })
      if(!this.multiple){
        this.$set(item,'active',!item.active)
        this.popupShow=!this.popupShow;
        this.$emit("choose",item)
        this.chooseList=[];
        this.chooseList.push(item)
      }else{
        this.chooseList=chooseList
        this.$emit("choose",chooseList)
      }
    },
    update () {
        if (isServer) return;
        if (this.popper) {
            this.$nextTick(() => {
                this.popper.update();
            });
        } else {
            this.$nextTick(() => {
                this.popper = new Popper(this.$el,this.$refs.popper, {
                    gpuAcceleration: false,
                    placement: this.placement,
                });
                this.popper.onCreate(popper => {
                    this.resetTransformOrigin(popper);
                });
            });
        }
    },
    destroy () {
        if (this.popper) {
            this.resetTransformOrigin(this.popper);
            setTimeout(() => {
                this.popper.destroy();
                this.popper = null;
            }, 300);
        }
    },
    resetTransformOrigin(popper) {
        let placementMap = {top: 'bottom', bottom: 'top'};
        let placement = popper._popper.getAttribute('x-placement').split('-')[0];
        let origin = placementMap[placement];
        popper._popper.style.transformOrigin = `center ${ origin }`;
    },
    handleShow(){
      this.popupShow=!this.popupShow;
    },
    handleClose(){
      this.popupShow=false;
    },
    UnproductiveList(){
      if(this.category.options.length){
          return
      }
      
    },
    getCategory(val){
      this.$emit("changes",val);
    },
  },
  beforeDestroy () {
      if (this.popper) {
          this.popper.destroy();
      }
  }
}
</script>

<style lang="scss">
.popup-select{
  position: relative;
  font-size:12px;
  .popup-select-line{
    padding:12px 0;color:#7a8b95;cursor: pointer;
  }
  .popup-box{border-radius:6px;position: absolute;overflow-y:auto;z-index:1;
    top:40px;left:0;width:100%;background-color:#fff;border:solid 1px #d7dcde;box-shadow:0 0 18px rgba(0,0,0,.15); 
    ul{height:auto;max-height:214px;overflow-y:auto;}
    .popup-box-line{
      padding:12px;color:#34495e;
      
      &.cur,&:hover{background-color:#eff3f6;cursor: pointer;
        .el-icon-check{color:#20a0ff;}
      }
      &.disabled{background-color: #eef1f6;cursor:not-allowed}
      .has{color:#20a0ff;}
    }
    .yuan{width:6px;height:6px;border-radius:100%;display: inline-block;vertical-align:middle;
      &.hot{background-color:#ff3833;}
      &.cold{background-color:#20a0ff;}
      &.day{background-color:#ffbf00;}
      &.duty{background-color:#20a0ff;}
    }
  }
}
</style>
